<div
  class="devui-carousel-container"
  [style.height]="height"
  (mouseenter)="arrowMouseEvent('enter')"
  (mouseleave)="arrowMouseEvent('leave')"
>
  <!-- carousel arrow -->
  <div class="devui-carousel-arrow" *ngIf="arrowTrigger !== 'never' && showArrow">
    <button class="arrow-left" (click)="prev()">
      <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <polygon
            fill="#293040"
            fill-rule="nonzero"
            points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
          ></polygon>
        </g>
      </svg>
    </button>
    <button class="arrow-right" (click)="next()">
      <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <polygon
            fill="#293040"
            fill-rule="nonzero"
            transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
            points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
          ></polygon>
        </g>
      </svg>
    </button>
  </div>
  <!-- carousel items -->
  <div class="devui-carousel-item-wrapper">
    <div class="devui-carousel-item-container">
      <ng-content select="d-carousel-item"></ng-content>
    </div>
  </div>
  <!-- carousel dots -->
  <ul class="devui-carousel-dots {{ dotPosition }}" *ngIf="items?.length > 1 && showDots">
    <li
      class="dot-item"
      (click)="switchStep(index, 'click')"
      (mouseenter)="switchStep(index, 'hover')"
      [ngClass]="{ active: activeIndex === index }"
      *ngFor="let item of items; let index = index"
    >
      <span class="dot-item-active-progress" [ngStyle]="{ 'transition-duration': transitionSpeed + 'ms' }"></span>
    </li>
  </ul>
</div>
